<template>
	<div class="publicpageview">
		<div class="publicformview">
			<el-form :inline="true" :model="listQuery" size="mini" ref="searchForm" label-width="100px">
				<el-row :gutter="20">
					<el-col :span="4">
						<el-form-item label="管理单位：" prop="districtId">
							<el-select v-model="listQuery.districtId" clearable @change="handleQuchange">
								<el-option v-for="item in areaList" :label="item.dname" :value="item.did"
									:key="item.did"></el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="4">
						<el-form-item label="管理部：" prop="houseAdminId">
							<el-select v-model="listQuery.houseAdminId" clearable>
								<el-option v-for="item in houseAdminList" :label="item.aname" :value="item.aid"
									:key="item.aid"></el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="4">
						<el-form-item label="所号：" prop="blockId">
							<el-input v-model="listQuery.blockId"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="4">
						<el-form-item label="所地址：" prop="blockAddress">
							<el-input v-model="listQuery.blockAddress"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="4">
						<el-form-item label="计划年份：" prop="projectYear">
							<el-date-picker v-model="listQuery.projectYear" type="year" placeholder="选择年">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item label="维修项目" prop="repairProject">
							<el-input v-model="listQuery.repairProject"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="4">
						<el-form-item label="是否上报：" prop="isPlanSubmission">
							<el-select v-model="listQuery.isPlanSubmission" clearable>
								<el-option label="否" :value="0" key="1"></el-option>
								<el-option label="是" :value="1" key="0"></el-option>
							</el-select>
						</el-form-item>
					</el-col>


					<el-col :span="4">
						<div style="padding-left: 90px;">
							<el-button size="mini" type="primary" @click="handleSearch">查询</el-button>
							<el-button size="mini" @click="resetForm('searchForm')">重置</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</div>

		<div class="publitableview">
			<el-button type="primary" size="mini" @click="handleAddUser('add')">计划录入</el-button>
			<el-button type="primary" size="mini" @click="handleBatchImport">批量计划录入</el-button>

			<el-table :data="list" border fit highlight-current-row size="mini">
				<el-table-column align="center" label="区房屋管理单位" prop="districtName">
				</el-table-column>
				<el-table-column align="center" label="管理部(分中心)" prop="houseAdminName">
				</el-table-column>
				<!--<el-table-column align="center" label="所号" prop="blockId">
				</el-table-column>
				<el-table-column align="center" label="所地址" prop="blockAddress">
				</el-table-column> -->

				<el-table-column align="center" label="工程年份" prop="projectYear">
					<template slot-scope="scope">
						{{getTime(scope.row.projectYear)}}
					</template>
				</el-table-column>

				<!-- <el-table-column align="center" label="房屋性质" prop="propertyType">
				</el-table-column> -->

				<el-table-column align="center" label="工程类别" prop="engineeringCategory">
				</el-table-column>

				<el-table-column align="center" label="修缮项目" prop="repairProject">
				</el-table-column>
				<el-table-column align="center" label="审批状态" prop="status">
					<template slot-scope="scope">
						{{statusName(scope.row.status)}}
					</template>

				</el-table-column>

				<el-table-column align="center" label="操作" width="220" fixed="right">
					<template slot-scope="scope">

						<!-- <el-button type="text" size="mini" @click="handleReportPass(scope.row.id)">计划上报</el-button> -->
						<el-button type="text" size="mini"
							@click="handleReportDialogOpen(scope.row, 'sp')">审批</el-button>
						<!-- <el-button type="text" size="mini" @click="handleUpdate(scope.row, 'update')">修改</el-button> -->
						<el-button type="text" size="mini"
							@click="handleReportDialogOpen(scope.row,'details')">详情</el-button>
						<el-button type="text" size="mini" @click="handleDelete(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="publicpaginationview">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="listQuery.pageNum" background :page-sizes="[10, 20, 50, 100]"
					:page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
					small></el-pagination>
			</div>
		</div>

		<el-dialog :title="isAdd == 'add' ? '年修缮计划录入' : isAdd == 'update' ? '年修缮计划修改' : '年修缮计划详情'"
			:visible.sync="dialogVisible" width="60%" :before-close="handleClose">
			<el-form :model="formData" ref="dataForm" class="demo-ruleForm" label-position="right" label-width="150px"
				size="mini">

				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="区房屋管理单位：" prop="districtId">
							<el-select v-model="formData.districtId" :disabled="true">
								<el-option v-for="item in areaList" :label="item.dname" :value="item.did"
									:key="item.did"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="工程类别：" prop="engineeringCategory">
							<el-select v-model="formData.engineeringCategory" @change="handleOneChange">
								<el-option v-for="item in oneList" :label="item.classname" :value="item.classname"
									:key="item.classid"></el-option>

							</el-select>
						</el-form-item>
					</el-col>


					<el-col :span="8">
						<el-form-item label="修缮项目：" prop="repairProject">
							<el-select v-model="formData.repairProject" @change="handleTwoChange">
								<el-option v-for="item in twoList" :label="item.classmid" :value="item.classmid"
									:key="item.classmidid"></el-option>

							</el-select>
						</el-form-item>
					</el-col>


					<el-col :span="8" v-show="formData.workloadName">
						<el-form-item label="工作量：" prop="workloadValue">


							<el-input v-model="formData.workloadValue">
								<template slot="append">{{formData.workloadName}}</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="工程年份：" prop="projectYear">
							<el-date-picker v-model="formData.projectYear" type="year" placeholder="年">
							</el-date-picker>
						</el-form-item>
					</el-col>






					<el-col :span="8">
						<el-form-item label="备注：" prop="note">
							<el-input v-model="formData.note"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="dialogVisible = false" size="medium" v-if="isAdd == 'details'">返
					回</el-button>

				<el-button type="primary" @click="handleSubmitClick" size="medium" v-else>保 存</el-button>
			</span>
		</el-dialog>


		<!-- 批量导入弹窗 -->
		<el-dialog title="上传文件" :visible.sync="uploadDialogVisible" width="680px" @close="handleUploadDialogClose">
			<div class="upload-container">
				<el-upload class="upload-dragger" drag :action="uploadAction" :file-list="fileList"
					:on-success="handleUploadSuccess" :on-error="handleUploadError" :limit="1"
					:on-remove="handleFileRemove" :before-upload="beforeUpload" :auto-upload="true" ref="upload">
					<i class="el-icon-upload"></i>
					<div class="el-upload__text">
						请将文件拖动到此处，或<em style="color: #008C93;">点击上传</em>
					</div>
				</el-upload>
			</div>

			<div slot="footer" class="dialog-footer">

				<el-button type="primary" size="mini" @click="handleImport" :loading="importLoading">保 存</el-button>
			</div>
		</el-dialog>


		<el-dialog title="年修缮计划审批" :visible.sync="reportVisible" width="60%" @close="handleReportDialogClose">
			<div class="report-top">
				<el-form :inline="true" size="mini" label-width="100px">
					<el-row :gutter="20">
						<el-col :span="8">
							<el-form-item label="单位：" prop="districtName">
								<el-input v-model="spData.districtName" :disabled="true"></el-input>
							</el-form-item>

						</el-col>

						<el-col :span="8">
							<el-form-item label="工程类别：" prop="engineeringCategory">
								<el-input v-model="spData.engineeringCategory" :disabled="true"></el-input>
							</el-form-item>

						</el-col>

						<el-col :span="8">
							<el-form-item label="修缮项目：" prop="repairProject">
								<el-input v-model="spData.repairProject" :disabled="true"></el-input>
							</el-form-item>

						</el-col>

						<el-col :span="8" v-if="spData.workloadName">
							<el-form-item :label="spData.workloadName + '：'" prop="districtName">
								<el-input v-model="spData.workloadValue" :disabled="true"></el-input>
							</el-form-item>

						</el-col>


						<el-col :span="8">
							<div style="display: flex;">
								<span>审核附件:</span>
								<el-upload class="upload-demo" :action="uploadAction" :on-remove="handleRemove" multiple
									:file-list="zhanfileList" :on-success="handleUploadSuccess2"
									:on-preview="handlePreview">
									<el-button size="small" type="text">点击上传</el-button>
								</el-upload>
							</div>
						</el-col>


					</el-row>
				</el-form>
			</div>

			<div class="report-table">
				<el-table :data="spData.spDataTable" border fit highlight-current-row size="mini">


					<el-table-column align="center" label="区房屋管理单位" prop="districtName">
					</el-table-column>
					<el-table-column align="center" label="管理部(分中心)" prop="houseAdminName">
					</el-table-column>
					<el-table-column align="center" label="所号" prop="blockName">
					</el-table-column>
					<el-table-column align="center" label="所地址" prop="blockAddress">
					</el-table-column>


					<el-table-column align="center" label="房屋性质" prop="houseNature">
					</el-table-column>

					<el-table-column align="center" label="项目预算（万元）" prop="workloadWan">
					</el-table-column>

					<el-table-column align="center" label="工作量" prop="workloadValue">
						<template slot-scope="scope">
							{{scope.row.workloadName}}: {{scope.row.workloadValue}}
						</template>
					</el-table-column>


					<el-table-column align="center" label="操作" width="220" fixed="right" v-if="currentType == 'sp'">
						<template slot-scope="scope">
							<el-button type="text" size="mini" @click="handleUpdate(scope.row, 'update')">修改</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>

			<div slot="footer" class="dialog-footer" v-if="currentType == 'sp'">

				<el-button type="primary" size="mini" @click="handleTongyi">同意</el-button>
				<el-button type="primary" size="mini" @click="handleReportCallback">退回</el-button>
			</div>

			<div slot="footer" class="dialog-footer" v-else>
				<el-button type="primary" size="mini" @click="handleReportDialogClose">关闭</el-button>
			</div>

		</el-dialog>
	</div>
</template>

<script>
import {
	listAll,
	createPlanYear,
	updatePlanYear,
	deletePlanYear,
	backPlanYear,
	reportPlanYear,
	updateReportPlanYear,
	detailPlanYear
} from '@/api/repair'
import {
	getClassmid,
	getClassdetail,
	getClassNewAll
} from '@/api'
import {
	getArea,
	getHouseAdmin,
	upload
} from '@/api/common'
import {
	Message
} from 'element-ui'
import moment from 'moment';
export default {
	name: "AccommodationManagementIndex",

	data() {
		return {
			listQuery: {
				pageNum: 1,
				pageSize: 10,
				districtId: "",
				houseAdminId: "",
				blockId: "",
				blockAddress: "",
				projectYear: "",
				repairProject: "",
				isPlanSubmission: null,
				dataType: 3
			},
			currentType: 'sp',
			reportTableData: [{

			}],
			reportVisible: false,
			total: 0,
			list: [],
			dialogVisible: false,
			isAdd: 'add',
			formData: {
				districtId: null,
				engineeringCategory: null,
				repairProject: null,
				projectYear: "",
				workloadRoom: "",
				workloadArea: "",
				workloadWan: "",
				commencementTime: "",
				completionTime: "",
				note: "",
				workloadValue: "",
				workloadName: ""
			},
			uploadDialogVisible: false,
			fileList: [],
			uploadAction: 'http://125.39.77.18:9021/mall-admin/fileUpload/upload',
			importLoading: false,
			multipleSelection: [],
			areaList: [],
			houseAdminList: [],
			houseFormAdminList: [],
			guanpianList: [],
			suoList: [],
			currentFileSrc: [],
			spData: {},
			zhanfileList: [],
			oneList: [],
			twoList: [],
			threeList: []
		};
	},

	computed: {
		getTime() {
			return (val) => {
				if (val) {
					return moment(val).format("YYYY")
				} else {
					return ""
				}
			}
		},

		statusName() {
			return (val) => {
				if (val == 0) {
					return '未上报'
				}
				if (val == 1) {
					return '审核中'
				}
				if (val == 2) {
					return '审核通过'
				}
				if (val == -1) {
					return '审核退回'
				}
			}
		}
	},

	mounted() {
		this.getCommon();
		this.getList();
		this.getClassAll();
	},

	methods: {
		getClassAll() {
			getClassNewAll({ kindId: 4 }).then(res => {
				this.oneList = res.data
			})
		},

		handleOneChange(value) {

			this.twoList = [];
			this.threeList = [];
			this.formData.repairProject = "";
			this.formData.workloadName = "";
			getClassmid({ classname: value }).then(res => {
				this.twoList = res.data
			})
		},

		handleTwoChange(value) {
			this.threeList = [];
			this.formData.workloadName = "";
			getClassdetail({
				classname: this.formData.engineeringCategory,
				classmid: value
			}).then(res => {
				this.threeList = res.data;
				if (this.threeList.length > 0) {
					this.formData.workloadName = this.threeList[0].detail
				}
			})
		},
		handlePreview(file) {

			window.open(file.response.data.url, '_blank');
		},

		handleTongyi() {

			let str = [];
			if (this.zhanfileList.length > 0) {
				this.zhanfileList.forEach((item) => {
					str.push({ url: item.response.data.url, name: item.response.data.name })
				})
			}
			let formdata = new FormData();
			formdata.append('id', this.spData.id);
			formdata.append('file', JSON.stringify(str));
			formdata.append('status', 2);
			updateReportPlanYear(formdata).then(res => {
				this.handleReportDialogClose();
				this.getList();
			})
		},


		handleRemove(file, fileList) {
			this.zhanfileList = fileList
		},

		handleUploadSuccess2(response, file, fileList) {
			this.zhanfileList = fileList
		},
		getCommon() {
			getArea().then(res => {
				this.areaList = res.data
			})
		},

		handleQuchange(val) {
			this.listQuery.houseAdminId = null;
			if (val) {
				this.getHouseAdmin(val);

			} else {
				this.houseAdminList = [];
			}
		},



		getHouseAdmin(val) {
			getHouseAdmin({
				DID: val,
				pageNum: 1,
				pageSize: 100000
			}).then(res => {
				this.houseAdminList = res.data.list;
			})
		},
		getFormHouseAdmin(val) {
			getHouseAdmin({
				DID: val,
				pageNum: 1,
				pageSize: 100000
			}).then(res => {
				this.houseFormAdminList = res.data.list;
			})
		},
		handleReportCallback(id) {
			this.$confirm(
				"是否回退该计划",
				"提示", {
				confirmButtonText: "保 存",
				cancelButtonText: "取 消",
				type: "warning",
			}
			)
				.then(() => {


					formdata.append('id', this.spData.id);
					formdata.append('file', JSON.stringify(str));
					formdata.append('status', -1);
					updateReportPlanYear(formdata).then(res => {
						this.handleReportDialogClose();
						this.getList();
						this.$message.success("操作成功")
					})

				})
				.catch(() => { });
		},

		handleReportPass(id) {
			this.$confirm(
				"是否上报该计划",
				"提示", {
				confirmButtonText: "保 存",
				cancelButtonText: "取 消",
				type: "warning",
			}
			)
				.then(() => {
					let formData = new FormData();
					formData.append('ids', id);
					formData.append('type', 2)
					reportPlanYear(formData).then(res => {
						Message({
							message: res.message || '操作成功',
							type: "success",
							duration: 2 * 1000,
						});
						this.getList();
					})
				})
				.catch(() => { });
		},

		handleSelectionChange(val) {
			this.multipleSelection = val;
		},
		handleReportDialogClose() {
			this.zhanfileList = [];
			this.reportVisible = false;
		},
		handleReportDialogOpen(row, type) {
			this.currentType = type;
			this.currenRow = { ...row };
			let formdata = new FormData();
			formdata.append('id', row.id);
			formdata.append('engineeringCategory', row.engineeringCategory)
			formdata.append('repairProject', row.repairProject)
			detailPlanYear(formdata).then(res => {
				this.reportVisible = true;

				this.spData = { ...row, spDataTable: [...res.data] }
			})


		},



		// 上传失败
		handleUploadError(err, file) {
			this.$message.error('文件上传失败');
		},

		// 导入数据
		handleImport() {
			if (this.fileList.length === 0) {
				this.$message.warning('请先选择要导入的文件');
				return;
			}

			this.importLoading = true;
			setTimeout(() => {
				this.importLoading = false;
				this.uploadDialogVisible = false;
				this.$message.success('导入成功！');
				this.getList();
			}, 2000);
		},
		// 批量导入
		handleBatchImport() {
			this.uploadDialogVisible = true;
			this.fileList = [];
		},

		// 上传前验证
		beforeUpload(file) {
			const isExcel = file.type === 'application/vnd.ms-excel' ||
				file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
			if (!isExcel) {
				this.$message.error('只能上传 Excel 文件！');
				return false;
			}

			const isLt2M = file.size / 1024 / 1024 < 2;
			if (!isLt2M) {
				this.$message.error('上传文件大小不能超过 2MB!');
				return false;
			}

			return true;
		},
		// 文件选择变化
		handleFileRemove(file, fileList) {
			this.fileList = fileList;
			let arr = [...this.currentFileSrc];
			let i;
			arr.forEach((item, index) => {
				if (item.fileSize == file.size && item.name == file.name) {
					i = index
				}
			})
			arr.splice(i, 1);
			this.currentFileSrc = arr;


		},
		// 上传成功
		handleUploadSuccess(response, file, fileList) {
			this.fileList = fileList
			if (response.code == 200) {
				this.$message.success('文件上传成功');
				this.currentFileSrc.push(response.data)
			} else {
				this.$message.error('文件上传失败');
				let arr = [...fileList.map(i => i)]
				arr.pop();
				this.fileList = arr;

			}
		},
		handleUploadDialogClose() {
			this.fileList = [];
			this.currentFileSrc = [];
			this.$refs.upload.clearFiles();
			this.uploadDialogVisible = false;
		},
		handleSubmitClick() {
			const {
				formData
			} = this;
			if (this.isAdd == 'add') {
				createPlanYear({
					...formData,
					dataType: 3,
					districtName: localStorage.getItem("userDname"),
				}).then(res => {
					this.handleClose()
					this.getList();
					Message({
						message: res.message || '操作成功',
						type: "success",
						duration: 2 * 1000,
					});
				})
			}
			if (this.isAdd == 'update') {
				updatePlanYear({
					...formData,
					dataType: 3,
					districtName: localStorage.getItem("userDname"),
				}).then(res => {
					this.handleClose()
					this.getList();
					this.handleReportDialogOpen(this.currentRow, 'sp')
					Message({
						message: res.message || '操作成功',
						type: "success",
						duration: 2 * 1000,
					});
				})
			}

		},

		handleSizeChange(val) {
			this.listQuery.pageNum = 1;
			this.listQuery.pageSize = val;
			this.getList();
		},
		handleCurrentChange(val) {
			this.listQuery.pageNum = val;
			this.getList();
		},

		handleSearch() {
			this.listQuery.pageNum = 1;
			this.getList();
		},
		getList() {
			listAll({
				...this.listQuery,
				projectYear: this.listQuery.projectYear ? moment(this.listQuery.projectYear).format("YYYY") : "",

			}).then((response) => {
				this.list = response.data.list;
				this.total = response.data.total;
			});
		},

		resetForm(val) {
			this.formData.workloadName = '';
			this.$refs[val].resetFields();
			this.listQuery.pageNum = 1;

			if (val == 'searchForm') {
				this.houseAdminList = [];
			}
		},

		handleAddUser(type) {
			this.formData.districtId = Number(localStorage.getItem('userDID'));
			this.isAdd = 'add';
			this.dialogVisible = true;
		},

		handleClose() {
			this.resetForm("dataForm");
			this.dialogVisible = false;
			this.houseFormAdminList = [];
			this.guanpianList = [];
			this.suoList = [];
		},

		async handleUpdate(currentData, type) {
			this.isAdd = type;
			//   一定要在打开弹窗前 再赋值 不然resetFiles没用
			this.dialogVisible = true;
			this.formData = { ...currentData }
			this.$forceUpdate()
		},

		handleDelete(id) {
			this.$confirm(
				"此操作将删除该条内容，请确认是否继续操作？",
				"删除提示", {
				confirmButtonText: "保 存",
				cancelButtonText: "取 消",
				type: "warning",
			}
			)
				.then(() => {
					deletePlanYear(id).then(res => {
						Message({
							message: res.message || '操作成功',
							type: "success",
							duration: 2 * 1000,
						});
						this.getList();
					})
				})
				.catch(() => { });
		}
	},
};
</script>

<style scoped>
.el-date-editor.el-input {
	width: 100%;
	cursor: pointer;
}

/* 上传组件标准样式 */
.upload-container {
	padding: 20px 0;
	width: 100%;
}

.upload-dragger {
	width: 100% !important;
}

.upload-dragger .el-upload {
	width: 100% !important;
}

.upload-dragger .el-upload-dragger {
	width: 100% !important;
	height: 200px;
	border: 2px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: border-color 0.2s ease;
	background-color: #fafafa;
	box-sizing: border-box;
}

.upload-dragger .el-upload-dragger:hover {
	border-color: #409EFF;
	width: 100%;
}

.upload-dragger .el-upload-dragger .el-icon-upload {
	font-size: 67px;
	color: #C0C4CC;
	margin: 40px 0 16px;
	line-height: 50px;
	width: 100%;
}

.upload-dragger .el-upload__text {
	color: #606266;
	font-size: 14px;
	text-align: center;
}

.upload-dragger .el-upload__text em {
	color: #409EFF;
	font-style: normal;
}

.template-download {
	margin-top: 15px;
	font-size: 14px;
	color: #606266;
}

.template-download .el-button--text {
	color: #409EFF;
	padding: 0;
	font-size: 14px;
}

::v-deep .el-upload {
	width: 100% !important;
}

::v-deep .el-upload-dragger {
	width: 100% !important;
}

/* 附件查看弹窗样式 */
.attachment-view {
	padding: 20px;
	min-height: 200px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 24px;
	justify-items: center;
}

.attachment-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: 100%;
	max-width: 120px;
}

.file-icon {
	width: 80px;
	height: 80px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	position: relative;
	cursor: pointer;
	transition: transform 0.2s;
}

.file-icon:hover {
	transform: scale(1.05);
}

/* 具体文件类型样式 */
.file-pdf {
	background: #EF4A37;
}

.pdf-lines {
	width: 48px;
	height: 36px;
	position: relative;
	margin-bottom: 8px;
}

.pdf-lines::before,
.pdf-lines::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 3px;
	background: white;
	border-radius: 1px;
}

.pdf-lines::before {
	top: 8px;
}

.pdf-lines::after {
	top: 16px;
}

.pdf-lines>span {
	position: absolute;
	top: 24px;
	left: 0;
	right: 0;
	height: 3px;
	background: white;
	border-radius: 1px;
}

.file-word {
	background: #2B579A;
}

.word-icon {
	font-size: 32px;
	color: white;
	font-weight: bold;
	margin-bottom: 8px;
}

.file-excel {
	background: #217346;
}

.excel-icon {
	font-size: 32px;
	color: white;
	font-weight: bold;
	margin-bottom: 8px;
}

.file-image {
	background: #FF6B35;
}

.file-default {
	background: #909399;
}

.default-icon {
	font-size: 24px;
	color: white;
	font-weight: bold;
	margin-bottom: 8px;
}

.file-text {
	color: white;
	font-size: 12px;
	font-weight: bold;
	font-family: Arial, sans-serif;
}

.file-name {
	font-size: 12px;
	color: #606266;
	font-weight: 500;
	text-align: center;
	line-height: 1.4;
	word-break: break-all;
	max-width: 100%;
}

/* 表单样式 */
.section-title {
	font-size: 16px;
	font-weight: bold;
	color: #20B2AA;
	margin: 20px 0 15px 0;
	padding-bottom: 8px;
	border-bottom: 2px solid #20B2AA;
}

.file-list-item {
	margin: 5px 0;
}

.file-list-item .el-button--text {
	color: #409EFF;
	padding: 0;
	font-size: 14px;
}

/* 文件预览样式 */
.file-preview-content {
	padding: 20px;
	text-align: center;
	min-height: 300px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.image-preview {
	text-align: center;
}

.file-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.file-icon-large {
	width: 120px;
	height: 120px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	position: relative;
	transition: transform 0.2s;
}

.file-icon-large:hover {
	transform: scale(1.05);
}

/* 大尺寸文件图标样式 */
.file-icon-large.file-pdf {
	background: #EF4A37;
}

.file-icon-large .pdf-lines {
	width: 72px;
	height: 54px;
	position: relative;
	margin-bottom: 12px;
}

.file-icon-large .pdf-lines::before,
.file-icon-large .pdf-lines::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 4px;
	background: white;
	border-radius: 2px;
}

.file-icon-large .pdf-lines::before {
	top: 12px;
}

.file-icon-large .pdf-lines::after {
	top: 24px;
}

.file-icon-large .pdf-lines>span {
	position: absolute;
	top: 36px;
	left: 0;
	right: 0;
	height: 4px;
	background: white;
	border-radius: 2px;
}

.file-icon-large.file-word {
	background: #2B579A;
}

.file-icon-large .word-icon {
	font-size: 48px;
	color: white;
	font-weight: bold;
	margin-bottom: 12px;
}

.file-icon-large.file-excel {
	background: #217346;
}

.file-icon-large .excel-icon {
	font-size: 48px;
	color: white;
	font-weight: bold;
	margin-bottom: 12px;
}

.file-icon-large.file-image {
	background: #FF6B35;
}

.file-icon-large.file-default {
	background: #909399;
}

.file-icon-large .default-icon {
	font-size: 36px;
	color: white;
	font-weight: bold;
	margin-bottom: 12px;
}

.file-icon-large .file-text {
	color: white;
	font-size: 16px;
	font-weight: bold;
	font-family: Arial, sans-serif;
}

.file-name-large {
	font-size: 16px;
	color: #303133;
	font-weight: 500;
	text-align: center;
	line-height: 1.4;
	word-break: break-all;
	max-width: 400px;
}

.file-size {
	font-size: 14px;
	color: #909399;
	font-weight: normal;
}

.report-top {
	display: flex;
	align-items: center;

	.el-date-editor.el-input {
		width: 200px;
	}

	span {
		color: #333333;
		margin-right: 10px;
	}

	.el-button {
		margin-left: 10px;
	}
}

.report-table {
	margin-top: 20px;

}

.el-form-item__content .el-input-group {
	vertical-align: middle;
}
</style>